import React, {useState} from 'react';
import styles from './index.module.scss';
import {Tooltip, Dropdown, Menu} from 'antd';
import {inject, observer} from 'mobx-react';
import {HeartOutlined, FullscreenOutlined, ShareAltOutlined, EditOutlined} from '@ant-design/icons';

import DvShow from "@/pages/dv/DvShow";
import {toJS} from "mobx";
import {adapterModeMap} from "@/pages/dv/constants/EnumDv";
import {IconFont} from "@/components";
import EnumRouter from "@/config/EnumRouter";

interface IProps extends Route.IProps{
  groupStore: any;
}

/**
 * 数据大屏
 * @constructor
 */
function Dashboard({match, history, groupStore, ...props}: IProps) {
  const {uuid} = match.params;
  const {dvList} = toJS(groupStore);

  const dvOption: DV.IOption = dvList[dvList.findIndex((dv: any) => dv.uuid === uuid)];

  const [adapterMode, changeMode] = useState(adapterModeMap.stretch.mode);

  const modeMenu = <Menu
    selectedKeys={[adapterMode]}
    onClick={({key}: any) => {
      changeMode(key)
    }}
  >
    {
      Object.entries(adapterModeMap)
        .map(([key, value]) => <Menu.Item key={key} icon={<IconFont type={value.icon}/>}>
          {value.label}
        </Menu.Item>)
    }
  </Menu>;


  /**
   * 打开大屏编辑页面
   */
  const openEditDV = ()=> {
    history.push(EnumRouter.dvEditor.replace(/(:uuid)/, uuid))
  }


  return <div className={styles.dashboardBox}>
    <header className={styles.toolBox}>
      <ul className={styles.title}>
        <li>test</li>
      </ul>
      <ul className={styles.tool}>
        <li>
          <Tooltip title={'编辑'}>
            <EditOutlined onClick={openEditDV}/>
          </Tooltip>
        </li>

        <li>
          <Dropdown overlay={modeMenu} placement="bottomCenter" arrow>
            <Tooltip title={'适配布局'}>
              <IconFont type={adapterModeMap[adapterMode].icon} />
            </Tooltip>
          </Dropdown>
        </li>

        <li>
          <Tooltip title={'全屏预览'}>
            <FullscreenOutlined/>
          </Tooltip>
        </li>
        <li>
          <Tooltip title={'收藏'}>
            <HeartOutlined/>
          </Tooltip>
        </li>
        <li>
          <Tooltip title={'公开分享'}>
            <ShareAltOutlined/>
          </Tooltip>
        </li>
      </ul>
    </header>
    <section className={styles.dvWrapperOuter}>
      <DvShow
        uuid={uuid}
        adapterMode={adapterMode}
        option={dvOption}
      />
    </section>
  </div>
}

export default inject('groupStore')(observer(Dashboard));
